<template>
	<view class="listLayout">
		<view class="content">
			<navigator class="item" :url="'/pages/preview/preview?id='+item._id" v-for="item in classList" :key="item._id">
				<image mode="aspectFill" :src="item.smallPicurl"></image>
			</navigator>
		</view>	
		<view class="loadingLayout">
			<uni-load-more v-if="!noData" status="loading"></uni-load-more>
			<uni-load-more v-else status="noMore"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad,onUnload, onReachBottom} from "@dcloudio/uni-app";
	import { apiGetClassList } from '../../api/apis';
	
	let classId = null;
	onLoad((e) => {
		classId = e.class_id
		uni.setNavigationBarTitle({
			title:e.title
		})
		getClassList(classId)
	});
	
	const classList = ref([])
	let params = {
		pageNum: 1,
		pageSize: 12
	}
	const noData = ref(false)
	const getClassList = async (id) => {
		let res = await apiGetClassList({
			classid: id,
			...params
		});
		classList.value = [...classList.value, ...res.data]
		// 放入本地缓存，详情预览页使用
		uni.setStorageSync("wallPaperList",classList.value)
		if(res.data.length < params.pageSize) {
			noData.value = true
		}
	}
	
	
	// 触底加载
	onReachBottom(() => {
		if(noData.value) return;
		params.pageNum++
		getClassList(classId)
	})
	
	// 销毁页面钩子
	onUnload(() => {
		uni.removeStorageSync("wallPaperList")
	})
</script>

<style lang="scss" scoped>
 .listLayout {
	 .content {		 
		 padding: 5rpx;
		 display: grid;
		 gap: 5rpx;
		 grid-template-columns: repeat(3,1fr);
	 }
	 .item {
		 height: 440rpx;
		 image {
			 width: 100%;
			 height: 100%;
			 display: block;
		 }
	 }
 }
</style>
